<template>
  <div>
    <table id="styled-table">
      <tr>
        <td style="width: 200px">
          <span>{{ dataList.PlanNumber }}</span>
        </td>
        <td>
          <span>{{ from.num }}</span>
        </td>
        <td style="width: 200px">
          <span>{{ dataList.PlanName }}</span>
        </td>
        <td>
          <span>{{ from.name }}</span>
        </td>
      </tr>
      <tr>
        <td>
          <span>{{ dataList.InspectionPlan }}</span>
        </td>
        <td>
          <span>{{ from.deviceVerificationDto.name }}</span>
        </td>
        <td>
          <span>{{ dataList.Status }}</span>
        </td>
        <td>
          <span>{{ from.statusName }}</span>
        </td>
      </tr>
      <tr>
        <td>
          <span>{{ dataList.Creator }}</span>
        </td>
        <td>
          <span>{{ from.createUser.name }}</span>
        </td>
        <td>{{ dataList.CreateTime }}</td>
        <td>{{ from.createTime }}</td>
      </tr>
      <tr>
        <td>
          <span>{{ dataList.PlanEndDate }}</span>
        </td>
        <td>
          <span>{{ formatTime(from.endDate) }}</span>
        </td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <br />
    <el-table
      :data="displayedItems"
      element-loading-text="Loading"
      height="430"
      fit
      highlight-current-row
    >
      <el-table-column :label="dataList.DeviceNumber">
        <template slot-scope="scope">
          {{ scope.row.deviceDto.num }}
        </template>
      </el-table-column>
      <el-table-column
        :label="
          $i18n.locale === 'en' ? dataList.DeviceEName : dataList.DeviceName
        "
      >
        <template slot-scope="scope">
          {{ scope.row.deviceDto.name }}
        </template>
      </el-table-column>
      <el-table-column :label="dataList.DeviceSpecifications">
        <template slot-scope="scope">
          {{ scope.row.deviceDto.specifications }}
        </template>
      </el-table-column>
      <el-table-column :label="dataList.DevicePersonResponsibleId">
        <template slot-scope="scope">
          {{ scope.row.deviceDto.personResponsibleName }}
        </template>
      </el-table-column>
      <el-table-column :label="dataList.ScheduledInspectionTime">
        <template slot-scope="scope">
          {{
            formatTime(scope.row.verificationPlanDate) == ""
              ? "/"
              : formatTime(scope.row.verificationPlanDate)
          }}
        </template>
      </el-table-column>
      <el-table-column :label="dataList.Week">
        <template slot-scope="scope">
          {{
            scope.row.cycleName == ""
              ? "/"
              : scope.row.cycle + scope.row.cycleName
          }}
        </template>
      </el-table-column>
      <el-table-column :label="dataList.Inspector">
        <template slot-scope="scope">
          {{
            scope.row.verificationPersonName === ""
              ? "/"
              : scope.row.verificationPersonName
          }}
        </template>
      </el-table-column>
      <el-table-column :label="dataList.CheckOrNot">
        <template slot-scope="scope">
          <span v-if="scope.row.isVerification == 1">{{
            dataList.Correct
          }}</span>
          <span v-else-if="scope.row.isVerification == 0">{{
            dataList.Deny
          }}</span>
          <span v-else></span>
        </template>
      </el-table-column>
    </el-table>
    <BasePagination
      :total="pagination.total"
      :current-page="pagination.pageIndex"
      :page-count="pagination.total"
      @changePage="changePage"
      @sizeChange="sizeChange"
    />
  </div>
</template>

<script>
import { getList } from "../../../api/DeviceVerificationPlan.js";
import { formatTime } from "../../../utils/time";
export default {
  name: "DeviceVerificationPlanView",
  components: {},
  props: {
    id: {
      type: String,
      default: "0",
    },
  },
  data() {
    return {
      listData: [],
      loading: false,
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
      from: {
        num: "",
        name: "",
        preparedName: "",
        preparedDate: "",
        remark: "",
        deviceVerificationDto: { name: "" },
        createUser: { name: "" },
      },
    };
  },
  computed: {
    displayedItems() {
      const startIndex =
        (this.pagination.pageIndex - 1) * this.pagination.pageSize;
      const endIndex = startIndex + this.pagination.pageSize;
      if (this.from.deviceVerificationPlanInfoDtoList !== undefined) {
        return this.from.deviceVerificationPlanInfoDtoList.slice(
          startIndex,
          endIndex
        );
      } else {
        return [];
      }
    },
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },

  watch: {},
  created() {
    this.getList();
  },
  methods: {
    formatTime,
    getList() {
      getList({ id: this.id }).then((res) => {
        if (res.data.dataList.length > 0) {
          this.from = res.data.dataList[0];
          this.pagination.total =
            this.from.deviceVerificationPlanInfoDtoList.length;
        }
      });
    },
    changePage(val) {
      this.pagination.pageIndex = val;
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
    },
    // 导出
    derive() {},
  },
};
</script>
<style scoped>
table {
  border-collapse: collapse; /* 合并边框，使其一致 */
  width: 100%;
}
table,
th,
td {
  border: 1px solid gainsboro; /* 设置边框的样式 */
  padding: 8px; /* 可选：设置单元格的内边距 */
}
td {
  text-align: center; /* 水平居中对齐 */
  vertical-align: middle; /* 垂直居中对齐 */
}
#styled-table2 tr:first-child {
  background-color: ghostwhite;
}

#styled-table td:nth-child(1),
#styled-table td:nth-child(3) {
  background-color: ghostwhite;
}
</style>
